<template>
  <!-- 导航头 -->
  <van-nav-bar title="网易严选" class="borderb" :fixed="true" :placeholder="true">
    <template #left>
      <van-icon name="wap-home-o" size="26" color="#505050" @click="router.push(`/`)" />
    </template>
    <template #right>
      <van-space :size="18">
        <van-icon name="search" size="26" color="#505050" @click="router.push(`/search`)" />
        <van-icon name="shopping-cart-o" size="26" color="#505050" @click="router.push(`/cart`)" />
      </van-space>
    </template>
  </van-nav-bar>
  <!-- 商品详情轮播 -->
  <van-swipe :autoplay="5000" class="mb-6">
    <van-swipe-item v-for="item in detailInfo?.skuInfo.skuImageList" :key="item.id">
      <img width="100%" height="100%" :src="item.imgUrl" />
    </van-swipe-item>
    <template #indicator="{ active, total }">
      <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
    </template>
  </van-swipe>
  <!-- 特价活动栏 -->
  <div class="m-promBanner m-processBanner">
    <div class="bannerContent" style="background-color: rgb(250, 30, 50)">
      <div class="col1">
        <div class="head" style="color: rgb(255, 255, 255)">
          <span>囤货特价</span><span>｜</span>
          <div style="display: inline">
            <span>距结束</span>
            <div style="display: inline-block">
              <van-count-down :time="time" format="DD天HH小时mm分ss秒" />
            </div>
          </div>
        </div>
        <div class="content content0">
          <div class="priceArea">
            <span class="currentPrice" style="color: rgb(255, 255, 255)"
              ><span style="font-size: 0.36rem">¥</span>{{ detailInfo?.price
              }}<span style="font-size: 0.4rem"></span></span
            ><span class="couterPrice">¥{{ (detailInfo?.price as number) + 500 }}</span>
          </div>
        </div>
      </div>
      <div><img class="logoUrl" src="https://yanxuan.nosdn.127.net/static-union/16710067081db06a.png" /></div>
    </div>
  </div>
  <!-- 商品详情 -->
  <div class="m-detailBaseInfo">
    <div class="priceInfo"></div>
    <div style="min-height: 1px" class="priceBox">
      <div class="spmcBanner">
        <div class="spmcPrice">
          <img class="iconUrl" src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" /><span
            class="spmcDesc"
            >Pro会员叠加优惠，再省<span class="spmcEconomizePrice">¥1.9</span></span
          ><i class="icon-questionMark"></i>
        </div>
        <span class="spmcBtn">开通</span>
      </div>
    </div>
    <div class="baseInfo">
      <div class="info">
        <div class="name">{{ detailInfo?.skuInfo.skuName }}</div>
        <div class="simpleBrandInfo">
          <div class="preLogo preLogo1"></div>
          <img class="brandLogo" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" /><span
            class="title"
            >网易严选</span
          >
        </div>
        <div class="desc">推荐理由</div>
      </div>
      <div class="comment single-line">
        <div class="wrap">
          <div class="info-wrap">
            <div class="num">99.9%</div>
            <div class="com">好评率</div>
          </div>
          <i class="u-icon u-address-right"></i>
        </div>
      </div>
    </div>
    <div class="rcmdBanner">
      <div class="angleTop"><span class="angleContent"></span></div>
      <ul>
        <li>
          <div class="key">1</div>
          <div class="recommendReason">优质加厚碳钢材质，静电喷涂，好清洁不易生锈</div>
        </li>
        <li>
          <div class="key">2</div>
          <div class="recommendReason">集中收纳，可推拉抽屉拿取方便</div>
        </li>
        <li>
          <div class="key">3</div>
          <div class="recommendReason">分层堆叠收纳，充分利用纵向空间</div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 邮费，购物返 -->
  <div style="border-top: 10px solid rgb(244, 244, 244)" class="popup2">
    <van-cell is-link @click="showPopupOne" title="邮费：满99包邮"></van-cell>
    <van-cell is-link @click="showPopupTwo">
      <template #title>
        <span class="custom-title">购物返：最高返</span>
        <span class="fontColor-red">4积分</span>
      </template>
    </van-cell>
    <van-popup
      v-model:show="showOne"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
      :close-on-click-overlay="false"
    >
      <div class="title"><span class="txt">邮费</span></div>
      <div class="content">
        <div class="rule">
          <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;满99元免邮</div>
          <div class="ruleContent">
            本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
          </div>
        </div>
        <span></span>
      </div>
    </van-popup>
    <van-popup
      v-model:show="showTwo"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
      :close-on-click-overlay="false"
    >
      <div class="title"><span class="txt">什么是购物返</span></div>
      <div class="content">
        <div class="rule">
          <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;关于购物返回馈金：</div>
          <div class="ruleContent">
            1. 回馈金是严选用以回馈用户的代币<br />2. 回馈金可与现金1:1抵扣使用<br />3. 回馈金使用无门槛，可叠加<br />4.
            购物即可返还回馈金，用户等级越高，返还比例越高<br />5.
            本月获取的回馈金，统一在次月25日23:59:59失效，请尽快使用<br />6. 可在个人中心--回馈金中查看回馈金资产<br />7.
            部分特殊商品和订单不支持返还回馈金，具体以回馈金的活动说明为准<br />8. 如有疑问，请联系严选在线客服
          </div>
        </div>
        <div class="rule">
          <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;关于购物返积分：</div>
          <div class="ruleContent">
            1. 用户在严选主站购物，确认收货后按商品售价的10%返购物积分<br />2.
            购物返积分数值精确到个位（小数点后全部舍弃，不进行四舍五入）<br />3.
            拼团/众筹/砍价/虚拟商品和礼品卡支付商品订单不支持返积分<br />4.
            购买礼品卡订单不返积分，礼品卡消费时，按照实际消费额度进行积分返赠<br />5.
            如商品订单完成后退货，则在退货流程发起后24小时内对该笔订单发放的积分数进行扣除<br />6.
            可在【帮助中心】-积分规则查看详细说明<br />7. 如有疑问，请联系严选在线客服
          </div>
        </div>
        <span></span>
      </div>
    </van-popup>
  </div>
  <!-- 选规格，配送，服务 -->
  <div style="border-top: 10px solid rgb(244, 244, 244)" class="popup3">
    <!-- 选规格 -->
    <van-cell is-link @click="showPopupThree" title="请选择规格数量"></van-cell>
    <nut-sku
      v-model:visible="base"
      :sku="data?.sku"
      :goods="data?.goods"
      :stepperMin="1"
      @changeStepper="changeStepper"
      :btnOptions="['buy', 'cart']"
      @selectSku="selectSku"
      @clickBtnOperate="clickBtnOperate"
      @click-close-icon="closeSku"
    ></nut-sku>
    <van-field v-model="fieldValue" is-link readonly placeholder="请选择配送地址" @click="showFour = true">
      <template #label>
        <span class="custom-title">配送：</span>
      </template>
    </van-field>
    <van-popup v-model:show="showFour" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="showFour = false"
        @finish="onFinish"
      />
    </van-popup>
    <!-- 服务 -->
    <van-cell is-link @click="showPopupFive">
      <template #title>
        <div style="display: flex">
          <span class="custom-title">服务：</span>
          <div style="display: flex; margin-right: 15px">
            <div style="width: 4px; height: 4px; background-color: #dd1a21; border-radius: 50%; margin: 10px 5px"></div>
            <span class="fontColor-red" style="color: #333; font-size: 12px">严选自营</span>
          </div>
          <div style="display: flex; margin-right: 15px">
            <div style="width: 4px; height: 4px; background-color: #dd1a21; border-radius: 50%; margin: 10px 5px"></div>
            <span class="fontColor-red" style="color: #333; font-size: 12px">七天无忧退换</span>
          </div>
        </div>
        <div style="display: flex; margin-left: 42px">
          <div style="width: 4px; height: 4px; background-color: #dd1a21; border-radius: 50%; margin: 10px 5px"></div>
          <span class="fontColor-red" style="color: #333; font-size: 12px">不享受学生优惠</span>
        </div>
      </template>
    </van-cell>
    <van-popup
      v-model:show="showFive"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
      :close-on-click-overlay="false"
    >
      <div class="title"><span class="txt">服务</span></div>
      <div class="content">
        <div class="rule">
          <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp; 严选自营</div>
          <div class="ruleContent">商品均为网易严选自营，品质保证</div>
        </div>
        <div class="rule">
          <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;7天无忧退换</div>
          <div class="ruleContent">
            顾客在收货之日起7天内保证商品完好、附件齐全的情况下，可发起无忧退换货，具体规则请参见帮助中心-退换货政策
          </div>
        </div>
        <div class="rule">
          <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;不享受学生折扣</div>
          <div class="ruleContent">该商品不支持享受学生特权优惠</div>
        </div>
        <span></span>
      </div>
    </van-popup>
  </div>
  <!-- 活动图轮播 -->
  <div class="dt-section dt-section-1" style="border-top: 10px solid rgb(233, 233, 233)">
    <van-swipe class="mb--5" :autoplay="3000" :show-indicators="false" height="100px">
      <van-swipe-item>
        <van-image
          width="100%"
          height="100px"
          src="https://yanxuan.nosdn.127.net/81ff91876da1aaed962d6d81f5302428.jpg?quality=75&type=webp&imageView&thumbnail=750x0"
        />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          width="100%"
          height="100px"
          src="https://yanxuan.nosdn.127.net/87bd3938e4764581dcf6db9aeabecafb.jpg?quality=75&type=webp&imageView&thumbnail=750x0"
        />
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 商品详情图 -->
  <div class="dt-section dt-section-1" style="border-top: 10px solid rgb(233, 233, 233)">
    <div class="lazy-component-wrapper">
      <div class="m-detailHtml">
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/8bb738d18a0e780f19fb3d0a72721e28.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/8bb738d18a0e780f19fb3d0a72721e28.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/44b8aed5c8e38811ef03983fb38d3cd9.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/44b8aed5c8e38811ef03983fb38d3cd9.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/9e423563c7175f8791c1146e70607e69.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/9e423563c7175f8791c1146e70607e69.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/4dd34fc1752dfde9c370ac55140f69ec.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/4dd34fc1752dfde9c370ac55140f69ec.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/bea58fadfdbe84116fa2ebab23c15120.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/bea58fadfdbe84116fa2ebab23c15120.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/8852c52916b4b462aa62abfbca061a39.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/8852c52916b4b462aa62abfbca061a39.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/16e62ebe1cbfa284e452ea59061939e6.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/16e62ebe1cbfa284e452ea59061939e6.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/65378ab799a1c64dc4a75a26a67f5a19.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/65378ab799a1c64dc4a75a26a67f5a19.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/d08c803b6703ce13228d1f6ccb0f585f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/d08c803b6703ce13228d1f6ccb0f585f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/170803584baa235666dea6b0665099bf.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/170803584baa235666dea6b0665099bf.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/e1f0592eaba46dd8f575f58862d03fe3.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/e1f0592eaba46dd8f575f58862d03fe3.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/e265a32e45b6edaf8758dc8aa2e9d959.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/e265a32e45b6edaf8758dc8aa2e9d959.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/90e537ba9ac7d1e4ed879b0e3eabaaf0.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/90e537ba9ac7d1e4ed879b0e3eabaaf0.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/088bc22e5dff3bb6d2658e124a9e7700.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/088bc22e5dff3bb6d2658e124a9e7700.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/fe943e2003d5b6a67f002b46ea271a6f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/fe943e2003d5b6a67f002b46ea271a6f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/d142191bf0c62201dca36b692c7e109f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/d142191bf0c62201dca36b692c7e109f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/487eb7c14f5320fb1d7291d19588c31a.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/487eb7c14f5320fb1d7291d19588c31a.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/39a29daba57e7ce3994b64d038b96dca.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/39a29daba57e7ce3994b64d038b96dca.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/64dce6dbedf83afa3f6872e520785267.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/64dce6dbedf83afa3f6872e520785267.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/79f35cc34943c8cc2c60e1b48b479bf3.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/79f35cc34943c8cc2c60e1b48b479bf3.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/7a8457851fc8b77e0ab13b97e2cfbdb0.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/7a8457851fc8b77e0ab13b97e2cfbdb0.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/8bdffe98ea7ad38dd77b225abeac0c07.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/8bdffe98ea7ad38dd77b225abeac0c07.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/aa5d696a4f126b04336b697c9371150a.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/aa5d696a4f126b04336b697c9371150a.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/eb663aad2c54fd6b3c05f9a7ef638d72.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/eb663aad2c54fd6b3c05f9a7ef638d72.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/f1e696cc17b1937c7c5da55448a39cce.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/f1e696cc17b1937c7c5da55448a39cce.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/92b94d02997e969035d08b23a2e58ef5.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/92b94d02997e969035d08b23a2e58ef5.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/b068da3a5eb6bf51e5bea5b87d0a8f3e.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/b068da3a5eb6bf51e5bea5b87d0a8f3e.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/0dbd836d846c65a8e754324eae8d10a8.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/0dbd836d846c65a8e754324eae8d10a8.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/033de6840b80a3c41d5c50de4d791828.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/033de6840b80a3c41d5c50de4d791828.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/9fc2645cfe60d5935f5f1cf365758278.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/9fc2645cfe60d5935f5f1cf365758278.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/f7ac9c368405876cc192727ee70e4f3a.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/f7ac9c368405876cc192727ee70e4f3a.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/40d241b9ccec5a05d65a125b10be45be.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/40d241b9ccec5a05d65a125b10be45be.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/523684f8b2246c44218d11ddfdf0de39.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/523684f8b2246c44218d11ddfdf0de39.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/f918e7f7a9c5747000644ef6b0e6b889.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/f918e7f7a9c5747000644ef6b0e6b889.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/e3179e790b622e9a05a4c1f0bb2894c5.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/e3179e790b622e9a05a4c1f0bb2894c5.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/7828f1891923a55799596e9ffa041386.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/7828f1891923a55799596e9ffa041386.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/0328429608dc00bde278f0396e48bb9f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/0328429608dc00bde278f0396e48bb9f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/b39bbd9d75e8063da3c76050bc67264d.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/b39bbd9d75e8063da3c76050bc67264d.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/65407cbd4ef3e42e9ab51fa41080fc3d.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/65407cbd4ef3e42e9ab51fa41080fc3d.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/6c3060e1455dba8d5181d115cd803d2f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/6c3060e1455dba8d5181d115cd803d2f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/7fca3ffa6deac4b448ba61e722f401cb.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/7fca3ffa6deac4b448ba61e722f401cb.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/09ae96e7dae5029abe1d986832895796.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/09ae96e7dae5029abe1d986832895796.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/918f65e03837aa825b1ab11b75733d8e.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/918f65e03837aa825b1ab11b75733d8e.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/cf10e8d661b289efe4785242675311ce.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/cf10e8d661b289efe4785242675311ce.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/6585c0dfe79442f54dda7bb26378c38e.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/6585c0dfe79442f54dda7bb26378c38e.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/003b59ef18da6554fbae10217bbf4768.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/003b59ef18da6554fbae10217bbf4768.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/18eab64ea0c14a457994ece55c5b2019.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/18eab64ea0c14a457994ece55c5b2019.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/4aeb3b5f85ce6133e573001adb20acdf.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/4aeb3b5f85ce6133e573001adb20acdf.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/2782ce9277a83e0c16db5440e08518ec.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/2782ce9277a83e0c16db5440e08518ec.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/15f45f16d247b484e436e3d4d60df980.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/15f45f16d247b484e436e3d4d60df980.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/4b9e50ff9a14e86b60b01da5baa95c03.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/4b9e50ff9a14e86b60b01da5baa95c03.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/76e8066ae249014769452bfeb3dfca3b.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/76e8066ae249014769452bfeb3dfca3b.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/41ce17fd5a25b7ece82ff30eddce0a7c.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/41ce17fd5a25b7ece82ff30eddce0a7c.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/5cd4a0d780141db377a9326e48850ee5.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/5cd4a0d780141db377a9326e48850ee5.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/589f8e1ae0fd00c4e9e3d8fef348d10b.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/589f8e1ae0fd00c4e9e3d8fef348d10b.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/2268f96d3958c673fee25d74cef0933a.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/2268f96d3958c673fee25d74cef0933a.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/4756b6e40c463889dde37d3d63ce04d8.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/4756b6e40c463889dde37d3d63ce04d8.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/0c6195f8d9749e5935b199a8d04d3132.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/0c6195f8d9749e5935b199a8d04d3132.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/f196369fb66f2bfbe0569bd04398bbbd.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/f196369fb66f2bfbe0569bd04398bbbd.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/d1bd43830b256f63a83990e9ff8898db.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/d1bd43830b256f63a83990e9ff8898db.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/ddafcea83e22eb1ef9bc3e55e7af1a7f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/ddafcea83e22eb1ef9bc3e55e7af1a7f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/66bde96fe7c2c213a1cc669d3e57bb0b.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/66bde96fe7c2c213a1cc669d3e57bb0b.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/c727c23efe65bfa8d93e6620dcd1525b.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/c727c23efe65bfa8d93e6620dcd1525b.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/b88c649dcf572c6c1964277ed1677eab.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/b88c649dcf572c6c1964277ed1677eab.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/d8a288a0a350994a7e5ed6a873ef7d6f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/d8a288a0a350994a7e5ed6a873ef7d6f.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/58e1ee4474489f834609c22f86a75af0.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/58e1ee4474489f834609c22f86a75af0.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/9105f41727b4ae6ad9d0c6df384a673c.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/9105f41727b4ae6ad9d0c6df384a673c.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/6d22195974e809581fce49733a5756c1.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/6d22195974e809581fce49733a5756c1.jpg"
            style=""
          />
        </p>
        <p>
          <img
            src="https://yanxuan-item.nosdn.127.net/b60db7555919371386137a8a7e8c338f.jpg?quality=75&amp;type=webp&amp;imageView"
            _src="https://yanxuan-item.nosdn.127.net/b60db7555919371386137a8a7e8c338f.jpg"
            style=""
          />
        </p>
        <p><br /></p>
      </div>
    </div>
  </div>
  <!-- 底部动作栏 -->
  <van-action-bar style="z-index: 100">
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="base = true" />
    <van-action-bar-button color="#dd1a21" type="warning" text="加入购物车" @click="base = true" />
  </van-action-bar>
</template>

<script setup lang="ts">
import detailApi, { type getDetailModel } from "@/api/detail";
import router from "@/router";
import { showImagePreview, showNotify } from "vant";
import { ref, watch, reactive, onMounted, toRefs } from "vue";
const time = ref(30 * 60 * 60 * 1000);
const showOne = ref(false);
const showTwo = ref(false);
const showFour = ref(false);
const showFive = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");


// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: "浙江省",
    value: "330000",
    children: [{ text: "杭州市", value: "330100" }],
  },
  {
    text: "江苏省",
    value: "320000",
    children: [{ text: "南京市", value: "320100" }],
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }: any) => {
  showFour.value = false;
  fieldValue.value = selectedOptions.map((option: any) => option.text).join("/");
};

// 四个弹出框 不算规格选择---------------------------
const showPopupOne = () => {
  showOne.value = true;
};
const showPopupTwo = () => {
  showTwo.value = true;
};
const showPopupThree = () => {
  base.value = true;
};
const showPopupFive = () => {
  showFive.value = true;
};

// NutUI - Sku商品规格选择
interface skuListModel {
  name: string;
  id: number;
  active: boolean;
  disable: boolean;
}
interface skuModel {
  id: number;
  name: string;
  list: skuListModel[];
}
interface goodsModel {
  skuId: string;
  price: string;
  imagePath: string;
}
interface dataModel {
  sku: skuModel[];
  goods: goodsModel;
}

const skuNumber = ref("1");
const skuIdd = ref("1");
const base = ref(false);
const data = reactive<dataModel>({
  sku: [],
  goods: {
    skuId: "",
    price: "",
    imagePath: "",
  },
});

const detailInfo = ref<getDetailModel>();
onMounted(async () => {
  try {
    const skuResult = await detailApi.getDetail("1");
    detailInfo.value = skuResult.data;
    skuIdd.value = `${skuResult.data.skuInfo.id}`;
    const { id, price, skuDefaultImg } = skuResult.data.skuInfo;
    const goodsObj = {
      skuId: `${id}`,
      price: `${price}`,
      imagePath: skuDefaultImg,
    };
    data.goods = goodsObj;
    skuResult.data.spuSaleAttrList.forEach((item) => {
      let { id, saleAttrName, spuSaleAttrValueList } = item;
      let SkuObj = {
        id,
        name: saleAttrName,
        list: [],
      };
      (spuSaleAttrValueList as any).forEach((spuItem: any, index: number) => {
        let spuObj = {
          name: spuItem.saleAttrValueName,
          id: spuItem.id,
          active: index == 0 ? true : false,
          disable: false,
        };
        (SkuObj as skuModel).list.push(spuObj);
      });
      data.sku.push(SkuObj);
    });
  } catch (error) {
    console.log(error);
  }
});

// inputNumber 更改
const changeStepper = (count: number) => {
  skuNumber.value = `${count}`;
};

// 切换规格类目
const selectSku = (ss: any) => {
  const { sku, skuIndex, parentSku, parentIndex } = ss;
  if (sku.disable) return false;
  data.sku[parentIndex].list.forEach((s) => {
    s.active = s.id == sku.id;
  });
};
// 底部操作按钮触发
const clickBtnOperate = (op: { type: string; value: number }) => {
  console.log("点击了操作按钮", op);
  if (op.type == "cart") {
    router.push({
      name: `Cart`,
      query: {
        skuId: skuIdd.value,
        skuNum: skuNumber.value,
      },
    });
  } else {
    // 跳转到结算页面
  }
};
// 关闭时触发
const closeSku = () => {};
</script>

<style lang="less" scoped>
.borderb {
  border-bottom: 1px solid #d9d9d9;
}
// ---------------------------------------------------------------------------------------------------------------------------
:root {
    --van-nav-bar-title-font-size: .5333rem;
    --van-nav-bar-background: #fafafa;
    --van-count-down-font-size: .32rem;
    --van-count-down-text-color: #fafafa;
}

.mb-6 {
    margin-bottom: -0.16rem;
}

.ht375 {
    height: 10rem;
}

element.style {
    color: rgb(255, 255, 255);
    min-height: .0267rem;
}

.m-processBanner .bannerContent .col1 .content .currentPrice {
    font-size: .7467rem;
    font-family: Gilroy-bold;
}

.m-processBanner .bannerContent .col1 .content .couterPrice {
    position: relative;
    color: #999;
    font-size: .3733rem;
    margin-left: .0533rem;
    color: #fff;
}

.m-processBanner .logoUrl {
    width: 2rem;
    height: 1.0667rem;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
}

.m-processBanner .bannerContent .col1 .content {
    font-size: .7467rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

element.style {
    color: rgb(255, 255, 255);
}

.m-processBanner .bannerContent .col1 .head {
    font-size: .32rem;
    height: .48rem;
    margin-bottom: .1067rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.m-processBanner .bannerContent .col1 {
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: .2133rem;
}

element.style {
    background-color: rgb(250, 30, 50);
}

.m-processBanner .bannerContent {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    padding-left: .4rem;
}

.m-processBanner,
.m-processBanner .bannerContent {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.m-processBanner,
.m-processBanner .bannerContent {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.m-processBanner {
    height: 1.9733rem;
    font-family: PingFangSC-Regular;
}

:root * {
    -webkit-filter: none\9 !important;
    filter: none\9 !important;
}

// 商品详细信息
.m-detailBaseInfo {
    background: #fff;
    position: relative;
    padding: .3467rem 0 .48rem .4rem;
}
.m-detailBaseInfo .priceInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.spmcBanner {
    margin: .16rem 0 .24rem;
    padding: 0 .2rem;
    width: 9.2rem;
    height: 1.0667rem;
    font-size: .32rem;
    font-weight: 600;
    line-height: 1.0667rem;
    background: #fff1d2;
    position: relative;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.spmcBanner .spmcPrice {
    line-height: .48rem;
    overflow: hidden;
}
.spmcBanner .iconUrl {
    width: .56rem;
    height: .32rem;
    margin-right: .0267rem;
    display: inline-block;
    vertical-align: middle;
}
.spmcBanner .spmcDesc {
    line-height: .4267rem;
    color: #333;
    margin-left: .0533rem;
}
.spmcBanner .spmcEconomizePrice {
    font-family: PingFang SC;
    font-weight: 700;
    color: #dd1a21;
    font-size: .3733rem;
    line-height: .6933rem;
    margin-left: .0533rem;
}
.spmcBanner .icon-questionMark {
    position: relative;
    background-image: url(/https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/normal-1d164e96ac8a5c0e7ac39af8b1982304.png);
    display: inline-block;
    vertical-align: middle;
    width: .3733rem;
    height: .3733rem;
    background-size: .0563rem .0384rem;
    background-position: -.0464rem -0.2187rem;
    margin-left: .0533rem;
    margin-top: -0.04rem;
    z-index: 1;
}
.m-detailBaseInfo .baseInfo {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: .1867rem;
}
.m-detailBaseInfo .info {
    padding-right: .32rem;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.m-detailBaseInfo .info .name {
    font-size: .4267rem;
    color: #333;
    line-height: .64rem;
    margin-bottom: .0533rem;
    font-weight: 700;
}
.m-detailBaseInfo .info .simpleBrandInfo {
    margin-top: .08rem;
    margin-bottom: .0667rem;
    height: .7467rem;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}
.m-detailBaseInfo .info .simpleBrandInfo .preLogo1 {
    width: .8533rem;
    height: .4267rem;
    margin-right: .1067rem;
    background: url(https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png) no-repeat;
    background-size: 100% 100%;
}
.m-detailBaseInfo .info .simpleBrandInfo .brandLogo {
    width: .3733rem;
    height: .3733rem;
    margin-right: .1067rem;
}
.m-detailBaseInfo .info .simpleBrandInfo .title {
    font-size: .32rem;
    line-height: .48rem;
    color: #7f7f7f;
    margin-right: .2133rem;
}
.m-detailBaseInfo .info .desc {
    font-size: .32rem;
    line-height: .48rem;
    color: #333;
    font-weight: lighter;
}
.m-detailBaseInfo .comment, .m-detailBaseInfo .comment .wrap {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
.m-detailBaseInfo .comment {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    width: 2.3733rem;
}
.m-detailBaseInfo .single-line {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}
.m-detailBaseInfo .comment .wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    padding-left: .2667rem;
    text-align: center;
    font-size: .3733rem;
}

.m-detailBaseInfo .comment, .m-detailBaseInfo .comment .wrap {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
.m-detailBaseInfo .comment .wrap .info-wrap .num {
    font-weight: 700;
    font-size: .4267rem;
    line-height: .6rem;
    color: #dd1a21;
    text-align: center;
}
.m-detailBaseInfo .comment .wrap .info-wrap .com {
    font-family: PingFangSC-Light;
    line-height: .48rem;
    font-size: .32rem;
    color: #7f7f7f;
}
.m-detailBaseInfo .comment .wrap .u-icon {
    background-image: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/arrow-dc528da35c384481e18b0291eaf8d6e7.png);
    display: inline-block;
    vertical-align: middle;
    width: .1333rem;
    height: .2533rem;
    background-size: 1.3413rem 1.1333rem;
    background-position: 0 -0.88rem;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: .1867rem;
    margin-right: .32rem;
}
.m-detailBaseInfo .rcmdBanner {
    margin: .16rem 0 0;
    padding: .1867rem .2667rem;
    width: 9.2rem;
    border-radius: 4.0012px;
    line-height: .8rem;
    background: #fafafa;
    border: 1.0012px solid #e6e6e6;
    border-radius: .0533rem;
    position: relative;
}
.m-detailBaseInfo .rcmdBanner .angleContent, .m-detailBaseInfo .rcmdBanner .angleTop {
    position: absolute;
    width: 0;
    height: 0;
    border-left: .12rem solid transparent;
    border-right: .12rem solid transparent;
}
.m-detailBaseInfo .rcmdBanner .angleTop {
    top: -0.12rem;
    left: .52rem;
    border-bottom: .12rem solid #e6e6e6;
    z-index: 1;
}
.m-detailBaseInfo .rcmdBanner .angleContent {
    top: .0133rem;
    left: .12rem;
    border-bottom: .12rem solid #fafafa;
    z-index: 2;
}
.m-detailBaseInfo .rcmdBanner li:not(:last-child) {
    margin-bottom: .0533rem;
}
.m-detailBaseInfo .rcmdBanner li {
    height: .48rem;
    line-height: .48rem;
    font-family: PingFangSC-Regular;
    font-size: .32rem;
    color: #333;
}
.spmcBanner .spmcBtn {
    height: .64rem;
    padding-left: .32rem;
    padding-right: 0.32rem;
    line-height: .64rem;
    background: #12161c;
    font-size: .32rem;
    text-align: center;
    color: #f3ca84;
    border-radius: .56rem;
}
.m-detailBaseInfo .rcmdBanner .key {
    display: inline-block;
    width: .32rem;
    height: .32rem;
    border: 1.0012px solid #dd1a21;
    border-radius: 50%;
    text-align: center;
    line-height: .32rem;
    font-size: .2667rem;
    color: #dd1a21;
    font-family: PingFang SC;
    font-weight: 700;
    margin-right: .08rem;
    vertical-align: middle;
}
.m-detailBaseInfo .rcmdBanner li .recommendReason {
    display: inline-block;
    height: .48rem;
    line-height: .48rem;
    vertical-align: middle;
}

.priceBox{
    height: 1.0667rem;
    width: 9.6rem;
}
// 商品详情图
.m-detailHtml {
    width: 100%;
}
.m-detailHtml img {
    width: 100%;
    height: auto;
    vertical-align: top;
}
</style>
